<template>
  <div class="p-4">
    <template v-for="src in imgList" :key="src">
      <img :src="src" v-show="false" alt="" />
    </template>
    <DetailModal :info="rowInfo" @register="registerModal" />
    <BasicTable @register="register" class="error-handle-table">
      <template #toolbar>
        <a-button @click="fireVueError" type="primary">
          {{ t("sys.errorLog.fireVueError") }}
        </a-button>
        <a-button @click="fireResourceError" type="primary">
          {{ t("sys.errorLog.fireResourceError") }}
        </a-button>
        <a-button @click="fireAjaxError" type="primary">
          {{ t("sys.errorLog.fireAjaxError") }}
        </a-button>
      </template>
      <template #bodyCell="{ column, record }">
        <template v-if="column.key === 'action'">
          <TableAction
            :actions="[
              {
                label: t('sys.errorLog.tableActionDesc'),
                onClick: handleDetail.bind(null, record as ErrorLogInfo),
              },
            ]"
          />
        </template>
      </template>
    </BasicTable>
  </div>
</template>

<script lang="ts" setup>
import type { ErrorLogInfo } from "#/store";
import { watch, ref, nextTick } from "vue";
import DetailModal from "./DetailModal.vue";
import { BasicTable, useTable, TableAction } from "@/components/Table";
import { useModal } from "@/components/Modal";
import { useMessage } from "@/hooks/web/useMessage";
import { useI18n } from "@/hooks/web/useI18n";
import { useErrorLogStore } from "@/store/modules/errorLog";
import { fireErrorApi } from "@/api/demo/error";
import { getColumns } from "./data";
import { cloneDeep } from "lodash-es";

const rowInfo = ref<ErrorLogInfo>();
const imgList = ref<string[]>([]);

const { t } = useI18n();
const errorLogStore = useErrorLogStore();
const [register, { setTableData }] = useTable({
  title: t("sys.errorLog.tableTitle"),
  columns: getColumns(),
  actionColumn: {
    width: 80,
    title: "Action",
    dataIndex: "action",
    // slots: { customRender: 'action' },
  },
});
const [registerModal, { openModal }] = useModal();

watch(
  () => errorLogStore.getErrorLogInfoList,
  (list) => {
    nextTick(() => {
      setTableData(cloneDeep(list));
    });
  },
  {
    immediate: true,
  },
);
const { createMessage } = useMessage();
if (import.meta.env.DEV) {
  createMessage.info(t("sys.errorLog.enableMessage"));
}
// 查看详情
function handleDetail(row: ErrorLogInfo) {
  rowInfo.value = row;
  openModal(true);
}

function fireVueError() {
  throw new Error("fire vue error!");
}

function fireResourceError() {
  imgList.value.push(`${new Date().getTime()}.png`);
}

async function fireAjaxError() {
  await fireErrorApi();
}
</script>
